<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 12 Spine</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>


    <script src="../../bin/pixi.dev.js"></script>

</head>
<body>
    <script>


    // create an array of assets to load

    var assetsToLoader = ["../../logo_small.png", "data/dragon.json"];

    // create a new loader
    loader = new PIXI.AssetLoader(assetsToLoader);

    // use callback
    loader.onComplete = onAssetsLoaded

    //begin load
    loader.load();


    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0xFFFFFF, true);

    // create a renderer instance
    var renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

    // set the canvas width and height to fill the screen
    renderer.view.style.display = "block";

    // add render view to DOM
    document.body.appendChild(renderer.view);
	
	var dragon = null;

    function onAssetsLoaded()
    {
		/* instantiate the spine animation */
        dragon = new PIXI.Spine("data/dragon.json");
		dragon.skeleton.setToSetupPose();
		dragon.update(0);
		dragon.autoUpdate = false;
		
		/* create a container for the spine animation and add the animation to it */
		var dragonCage = new PIXI.DisplayObjectContainer();
		dragonCage.addChild(dragon);
		
		/* measure the spine animation and position it inside its container to align it to the origin */
		var localRect = dragon.getLocalBounds();
		dragon.position.set(-localRect.x, -localRect.y);
		
		/* now we can scale, position and rotate the container as any other display object */
		var scale = Math.min((window.innerWidth * 0.7) / dragonCage.width, (window.innerHeight * 0.7) / dragonCage.height);
		dragonCage.scale.set(scale, scale);
		dragonCage.position.set((window.innerWidth - dragonCage.width) * 0.5, (window.innerHeight - dragonCage.height) * 0.5);
		
		/* add the container to the stage */
		stage.addChild(dragonCage);
		
		/* once position and scaled, set the animation to play */
        dragon.state.setAnimationByName(0, "flying", true);




        var logo = PIXI.Sprite.fromImage("../../logo_small.png")
        stage.addChild(logo);


        logo.anchor.x = 1;
        logo.position.x = window.innerWidth
        logo.scale.x = logo.scale.y = 0.5;
        logo.position.y = window.innerHeight - 70;
        logo.interactive = true;
        logo.buttonMode = true;
        logo.click = logo.tap = function()
        {
            window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
        }
		
		requestAnimFrame(animate);

    }


    function animate() {

        requestAnimFrame( animate );
		/* update the spine animation, only needed if autoupdate is set to false */
		dragon.update(0.01666666666667); // HARDCODED FRAMERATE!
        renderer.render(stage);
    }

    </script>

    </body>
</html>
